<template>
  <div class="wrapper">
      <ul>
          <li 
            v-for="item of letters" 
            :key="item"
            :ref="item"
            @click="handleLetterClick"
            @touchstart="touchAlphabetStart"
            @touchmove="touchAlphabetMove"
            @touchend="touchAlphabetEnd"
          >
              {{item}}
          </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props:{
      cities:Object
  },
  data(){
      return{
          touching:false,
          timer:null
      }
  },
  computed:{
      letters(){
          var arr=[];
          for(let i in this.cities){
              arr.push(i)
          }
          return arr
      },
      Ah(){
          return this.$refs['A'][0].offsetTop;
      }
  },
  methods:{
      handleLetterClick(e){
          e=e||window.event;
          this.$emit('change',e.target.innerText)
      },
      touchAlphabetStart(){
          this.touching=true;
      },
      touchAlphabetMove(e){
          if(this.touching){
              if(this.timer){
                  clearTimeout(this.timer)
              }
              this.timer=setTimeout(()=>{
                //   const Ah=this.$refs['A'][0].offsetTop;
                  const touchY=e.touches[0].clientY-84;
                  const index=Math.floor((touchY-this.Ah)/20)
                  if(index>0&&this.letters.length){
                      this.$emit('change',this.letters[index])
                  }
              },16)
              
          }
      },
      touchAlphabetEnd(){
          this.touching=false;
      }
  }
}
</script>

<style scoped>
.wrapper{
    position: absolute;
    top:1.68rem;
    right:0;
    bottom:0;
    color:#00bcd4;
    display: flex;
    align-items: center;
    justify-content:center;
}
.wrapper li{
     line-height:.4rem;
}
</style>
